<%--
  Created by IntelliJ IDEA.
  User: 40937
  Date: 2022/8/21
  Time: 17:03
  To change this template use File | Settings | File Templates.
--%>
<%@ page isELIgnored="false" pageEncoding="utf-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="renderer" content="webkit">
    <title>添加新订单</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/pintuer.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/admin.css">
    <script src="${pageContext.request.contextPath}/js/jquery.js"></script>
    <script src="${pageContext.request.contextPath}/js/pintuer.js"></script>
</head>
<body>
<form method="post" action="${pageContext.request.contextPath}/order/addOrder" id="listform">
    <div class="panel admin-panel">
        <div class="panel-head"><strong class="icon-reorder"> 添加新订单</strong></div>
        <div class="padding border-bottom">
            <ul class="search" style="padding-left:10px;">

                <if condition="$iscid eq 1">
                    <li>
                        <select name="uid" class="input" style="width:200px; line-height:17px;" onchange="changesearch()">
                            <option value="0">请选择用户</option>
                            <c:forEach items="${users}" var="user">
                                <option value="${user.id}">${user.name}</option>
                            </c:forEach>
                        </select>
                    </li>
                </if>
            </ul>
        </div>
        <table class="table table-hover text-center">
            <tr>
                <th width="100" style="text-align:left; padding-left:20px;">商品编号</th>
                <th>商品名称</th>
                <th>商品价格</th>
                <th>商品描述</th>
                <th>商品库存</th>
                <th>订单数量</th>
            </tr>
            <volist name="list" id="vo">
                <c:forEach items="${products}" var="product">
                    <tr>
                        <td style="text-align:left; padding-left:20px;"><input type="checkbox" name="ids" value="${product.id}" />
                                ${product.id}</td>
                        <td>${product.name}</td>
                        <td>${product.price}</td>
                        <td>${product.description}</td>
                        <td>${product.stock}</td>
                        <td><input type="number" name="numbers${product.id}" onmouseleave=""></td>
                    </tr>
                </c:forEach>
                <tr>
                    <td style="text-align:left; padding:19px 0;padding-left:20px;"><input type="checkbox" id="checkall"/>
                        全选 </td>
                    <td colspan="3" style="text-align:left;padding-left:20px;"></td>
                    <td colspan="2" style="text-align:center;padding-left:20px;">
                        <strong>订单金额:<input type="button" name="totalMoney" value="0" id="totalMoney" ></strong>
                        <input type="button" value="刷新金额" id="updatemon">
                        <input type="submit" value="提交订单">
                    </td>
                </tr>
                <tr>
                    <td colspan="8"><div class="pagelist"> <a href="">上一页</a> <span class="current">1</span><a href="">2</a><a href="">3</a><a href="">下一页</a><a href="">尾页</a> </div></td>
                </tr>
            </volist>
        </table>
    </div>
</form>
<script type="text/javascript">

    //刷新计算总金额，没有异步，只用当前页面数据
    $("#updatemon").click(function () {
        var products=[];
        var moneys = 0;
        $("input[name='ids']").each(function () {
            //console.log(this.checked);
            if (this.checked == true) {
                var id = this.value;
                var num = document.getElementsByName("numbers"+id)[0].value;
                //$("input[name='numbers"+id+"']").val();

                console.log(id);
                console.log(num);

                <c:forEach items="${products}" var="product">
                if (id == ${product.id}) {
                    moneys += ${product.price}*num;
                }
                </c:forEach>
            }
        })
        moneys = moneys.toFixed(2);
        $("#totalMoney").val(moneys+"￥");

    });


    //全选
    $("#checkall").click(function(){
        var checkall = document.getElementById("checkall");
        var ifno = checkall.checked;

        $("input[name='ids']").each(function(){

            //全选,跟随全选复选框
            this.checked = ifno;
        });
    })


</script>
</body>
</html>
